<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
        *{margin:0;padding:0}
        #box {width: 380px;height: 50px; margin: 0px auto;border:1px solid #000;line-height: 50px; border-bottom: 0;text-align: center;}
        #calendar{width:340px;margin:0px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
        #calendar h4{width: 210px; height: 10px; text-align:center; margin-bottom:10px}
        #calendar .a1{ position:absolute;top:5px;left:18px;text-decoration: none;color: darkseagreen;}
        #calendar .span{ position: absolute;top:5px;left:85px;}
        #calendar .span1{ position: absolute;top:115px;left:265px;}
        #calendar .a2{ position:absolute;top:5px;right:150px;text-decoration: none;color: darkseagreen;}
        #calendar .week{width: 210px;height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
        #calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
        #calendar .dateList{width: 210px; overflow:hidden; clear:both}
        #calendar .dateList li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
        #calendar .dateList .ccc{ color:#ccc;}
        #calendar .dateList .red{ background:#F90; color:#fff;}
        #calendar .dateList .sun{ color:#f00;}
        
    </style>
</head>

<body>
    <div id=box></div>
    <div id="calendar">
        <h4 id="title"></h4>
        <a href="javascript:;" class="a1" id="prev">上月</a>
        <span class="span" id="span"></span>
        <a href="javascript:;" class="a2" id="next">下月</a>
        <span class="span1" id="span1"></span>
        <ul class="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul class="dateList" id="dateList"></ul>
    </div>
    <script>
        var calendar = document.getElementById('celendar');
        var dateList = document.getElementById('dateList');
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        var span = document.getElementById('span')
        var span1 = document.getElementById('span1')
        
        var d = new Date();
        var n1 = d.getFullYear();
        var y1 = d.getMonth()+1;
        var r1 = d.getDate();
        document.getElementById('box').innerHTML = n1+'年'+y1+'月'+r1+'日'
        // span1.innerHTML = d
        setInterval(function(){
            var d = new Date();
            var y = d.getHours()
            var m = d.getMinutes()
            var ce = d.getSeconds();
            var w1 = d.getDay()
            span1.innerHTML = y+' : '+m+' : '+ce+'<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;星期'+w1
        },1000)
        

        str_1 = ''
        var years = d.getFullYear();
        var months = d.getMonth()+1;
        var days = d.getDate();
        str_1 = years+'年'+months+'月'
        span.innerHTML =str_1
        var startday = d.getDate();
        // console.log(startday)

        d.setMonth(d.getMonth()+1,0)
        var day = d.getDate();
        var downWeek = d.getDay()
        // console.log(day);
        // console.log(downWeek)
    
        d.setDate(1)
        var week = d.getDay();
        // console.log(week)

        d.setMonth(d.getMonth(),0)
        var upDay = d.getDate();
        // console.log(upDay)

        var str = ''
        for(var i=1;i<=week;i++){
            var k = upDay
            k = k-week+i
            str += '<li class="ccc">'+upDay+'</li>' 
        }

        for(var i=1;i<=day;i++){
            if((week+i)%7===0 || (week+i)%7 === 1){
                str = str + '<li class="sun">'+i+'</li>'
            }else if(i<startday){
                str = str + '<li>'+i+'</li>'
            }else if(i==startday){
                str = str + '<li class="red">'+i+'</li>'
            }else{
                str = str + '<li>'+i+'</li>'
            } 
        }
        for(var i=1;i<=6-downWeek;i++){
            str += '<li class="ccc">'+i+'</li>'
        }
        dateList.innerHTML = str;

        
        
        
        var d = new Date();
        console.log(d)
        var i1 = 1;
        next.onclick = function(){ 
            // var d = new Date();
            d.setMonth(d.getMonth()+1,1)
            // d = d;
            // console.log(d)
            str_1 = ''
            var years = d.getFullYear();
            var months = d.getMonth()+1;
            var days = d.getDate();
            str_1 = years+'年'+months+'月'
            span.innerHTML =str_1
            // console.log(d);s
            var startday = d.getDate();
            var s_month = d.getMonth();
            // console.log(startday)

            d.setMonth(d.getMonth()+1,0)
            var day = d.getDate();
            var downWeek = d.getDay()
            d.setDate(1)
            var week = d.getDay();
            // console.log(week)

            d.setMonth(d.getMonth(),0)
            var upDay = d.getDate();
            // console.log(upDay)

            var str = ''
            for(var i=1;i<=week;i++){
                var k = upDay
                k = k+i-week
                str += '<li class="ccc">'+k+'</li>' 
            }

            for(var i=1;i<=day;i++){
                if((week+i)%7===0 || (week+i)%7 === 1){
                    str = str + '<li class="sun">'+i+'</li>'
                }else if(i<startday){
                    str = str + '<li>'+i+'</li>'
                }else if(i==startday){
                    str = str + '<li class="red">'+i+'</li>'
                }else{
                    str = str + '<li>'+i+'</li>'
                } 
            }
            for(var i=1;i<=6-downWeek;i++){
                str += '<li class="ccc">'+i+'</li>'
            }
            dateList.innerHTML = str;
            // i1++;
            d.setMonth(d.getMonth()+1,1)
            // console.log(d)
        }

        // d.setMonth(d.getMonth()+i1,1);
        // console.log(d)

        
        prev.onclick = function(){
            // var d = new Date();
            var k1 = 1;
            d.setMonth(d.getMonth()-k1,1)
            console.log(d)
            str_1 = ''
            var years = d.getFullYear();
            var months = d.getMonth()+1;
            var days = d.getDate();
            str_1 = years+'年'+months+'月'
            span.innerHTML =str_1
            // console.log(d);
            var startday = d.getDate();
            var s_month = d.getMonth();
            // console.log(startday)

            d.setMonth(d.getMonth()+1,0)
            var day = d.getDate();
            var downWeek = d.getDay()
            d.setDate(1)
            var week = d.getDay();
            console.log(week)

            d.setMonth(d.getMonth(),0)
            var upDay = d.getDate();
            console.log(upDay)

            var str = ''
            for(var i=1;i<=week;i++){
                var k = upDay
                k = k+i-week
                str += '<li class="ccc">'+k+'</li>' 
            }

            for(var i=1;i<=day;i++){
                if((week+i)%7===0 || (week+i)%7 === 1){
                    str = str + '<li class="sun">'+i+'</li>'
                }else if(i<startday){
                    str = str + '<li>'+i+'</li>'
                }else if(i==startday){
                    str = str + '<li class="red">'+i+'</li>'
                }else{
                    str = str + '<li>'+i+'</li>'
                } 
            }
            for(var i=1;i<=6-downWeek;i++){
                str += '<li class="ccc">'+i+'</li>'
            }
            dateList.innerHTML = str;
            // k1--;
            d.setMonth(d.getMonth()+1,10)
        }
    </script>	
</body>
</html>
